import { FC, memo, useCallback, useMemo } from 'react';
import { Menu, Dropdown } from 'antd';
import { DownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import styles from './pagination.module.less';
import { MenuInfo } from 'rc-menu/lib/interface';
import scrollToTop from '../../utils/scrollToTop';

interface IPaginationProps {
  current: number;
  pageSize: number;
  total: number;
  onChange?: (current: number, pageSize: number) => void;
}

const Pagination: FC<IPaginationProps> = (props) => {
  if (!props.total) {
    return null;
  }

  const lastPage = useMemo(
    () => (props.total ? Math.ceil(props.total / props.pageSize) : 0),
    [props.total, props.pageSize],
  );

  const pageCenterItem = useMemo(() => {
    if (lastPage == 0) {
      return [];
    }
    if (lastPage == 1) {
      return [1];
    }
    return Array.from(new Array(lastPage + 1).keys()).slice(
      Math.max(props.current - 1, 1),
      props.current + Math.min(3, lastPage - props.current + 1) - 1,
    );
  }, [props.current, lastPage]);

  const activeClazz = useMemo(() => {
    return (page: number | string) => {
      if (typeof page === 'string') {
        return '';
      }
      if (props.current === page) {
        return styles.active;
      }
    };
  }, [props.current]);

  const FirstPageElement = useMemo(() => {
    return (page: number | string, begin = 3) => {
      // 第三页显示1
      //
      if (lastPage !== 1 && props.current >= begin && lastPage >= begin) {
        return (
          <li
            key={page}
            onClick={() => handleChange(page)}
            className={activeClazz(page)}
          >
            {page}
          </li>
        );
      }
      return null;
    };
  }, [props.current, lastPage]);

  const lastPageElement = useMemo(() => {
    return () => {
      if (lastPage > 1) {
        return (
          <li
            onClick={() => handleChange(lastPage)}
            className={activeClazz(lastPage)}
            key={lastPage}
          >
            {lastPage}
          </li>
        );
      }
      return null;
    };
  }, [props.current, lastPage]);

  const lastPageDian = useMemo(() => {
    return () => {
      if (lastPage - props.current <= 1 || lastPage <= 3) {
        return null;
      }
      return <li>...</li>;
    };
  }, [props.current, lastPage]);

  const handleChange = useCallback(
    (current?: number | string, pageSize?: number) => {
      if (typeof current === 'string') {
        return;
      }

      if ((current && current < 1) || (pageSize && pageSize < 1)) {
        return;
      }
      props.onChange &&
        props.onChange(current || props.current, pageSize || props.pageSize);
      scrollToTop();
    },
    [props.current, props.pageSize, lastPage],
  );

  const onMenuClick = useCallback(
    (info: MenuInfo) => {
      handleChange(1, Number(info.key));
    },
    [handleChange],
  );
  const menu = useMemo(() => {
    return (
      <Menu onClick={onMenuClick}>
        {[10, 20, 30].map((size) => (
          <Menu.Item key={size.toString()}>{size}</Menu.Item>
        ))}
      </Menu>
    );
  }, []);

  const leftIconDisabled = useMemo(() => {
    return () => {
      if (props.current == 1) {
        return styles.disabled;
      }
      return '';
    };
  }, [props.current]);

  const rightIconDisabled = useMemo(() => {
    return () => {
      if (props.current == lastPage) {
        return styles.disabled;
      }
      return '';
    };
  }, [props.current, lastPage]);

  return (
    <ul className={`${styles.pagination} flex ai-center jc-center w-100`}>
      <li className={styles.paginationOptions}>
        <Dropdown overlay={menu} trigger={['click']} placement="topCenter">
          <a onClick={(e) => e.preventDefault()}>
            每页{props.pageSize}个{' '}
            <DownOutlined style={{ marginLeft: '6px' }} />
          </a>
        </Dropdown>
      </li>
      <li
        className={leftIconDisabled()}
        onClick={() => handleChange(props.current - 1)}
      >
        <LeftOutlined />
      </li>
      {FirstPageElement(1, 3)}
      {FirstPageElement('...', 4)}
      {pageCenterItem.map((item) => {
        return (
          <li
            key={item}
            onClick={() => handleChange(item)}
            className={activeClazz(item)}
          >
            {item}
          </li>
        );
      })}
      {lastPageDian()}
      {lastPageElement()}
      <li
        className={rightIconDisabled()}
        onClick={() => handleChange(props.current + 1)}
      >
        <RightOutlined />
      </li>
    </ul>
  );
};

export default memo(Pagination);
